
import React from "react"
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"
import "./App.css"

// 创建外壳组件
class App extends React.Component {
	state = {
		list: [
			{id: '1', name: '看电视', checked: true},
			{id: '2', name: '打篮球', checked: false},
			{id: '3', name: '写作业', checked: false},
		]
	}

	addTodo = (todo) => {
		let newList = [todo, ...this.state.list]
		this.setState({list: newList})
	}

	updateTodo = (id, checked) => {
		let {list} = this.state;
		list.forEach(item => {
			if(item.id === id) {
				item.checked = checked
			}
		})
		this.setState({list})
	}

	deleteTodo = (id) => {
		let {list} = this.state;
		list = list.filter(item => item.id !== id);
		this.setState({list})
	}

	changeAllChecked = (state) => {
		let {list} = this.state;
		list.forEach(item => item.checked = state)
		this.setState({list})
	}

	removeAll = () => {
		this.setState({list: []})
	}

	render() {
		return (
			<div className="todo-container">
				<Header addTodo={this.addTodo} />
				<List list={this.state.list} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
				<Footer list={this.state.list} changeAllChecked={this.changeAllChecked} removeAll={this.removeAll} />
			</div>
		)
	}
}

export default App